<template>
  <a-drawer
    :width="drawerWidth()"
    :headerStyle="state.headerStyle"
    :bodyStyle="state.bodyStyle"
    placement="right"
    :closable="true"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <template v-slot:title>
      <img :src="webhookIcon2" class="anticon" />
      <span class="flow-ant-drawer-title">
        <EditName v-model="state.node.name" />
      </span>
    </template>
    <div class="flow-setting-module">
      <div class="flow-setting-content">
        <a-form>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">节点名称</p>
            <a-form-item name="name">
              <a-input v-model="state.node.name" :size="size" class="w-full" placeholder="节点名称" />
            </a-form-item>
          </div>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">事件类型</p>
            <div class="flow-setting-option">
              <div class="flow-setting-option-item">
                <div class="flow-setting-option-item-left">
                  <img :src="optionIcon" />
                  <div class="flow-setting-option-desc">
                    <p class="setting-option-title">前置事件</p>
                    <p class="setting-option-desc">用于节点前,常用于数据校验</p>
                  </div>
                </div>
                <div class="flow-setting-option-item-switch">
                  <a-switch checked-children="开" un-checked-children="关" />
                </div>
              </div>
            </div>
            <div class="flow-setting-option">
              <div class="flow-setting-option-item">
                <div class="flow-setting-option-item-left">
                  <img :src="optionIcon" />
                  <div class="flow-setting-option-desc">
                    <p class="setting-option-title">后置事件</p>
                    <p class="setting-option-desc">用于节点后,常用于数据落地保存</p>
                  </div>
                </div>
                <div class="flow-setting-option-item-switch">
                  <a-switch checked-children="开" un-checked-children="关" />
                </div>
              </div>
            </div>
            <div class="flow-setting-option">
              <div class="flow-setting-option-item">
                <div class="flow-setting-option-item-left">
                  <img :src="optionIcon" />
                  <div class="flow-setting-option-desc">
                    <p class="setting-option-title">WebHook</p>
                    <p class="setting-option-desc">远程API调用</p>
                  </div>
                </div>
                <div class="flow-setting-option-item-switch">
                  <a-switch checked-children="开" un-checked-children="关" />
                </div>
              </div>
            </div>
          </div>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">前置事件配置</p>
          </div>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">后置事件配置</p>
            <!-- <a-textarea v-model="noticeContext" :size="size" class="w-full" placeholder="通知内容" /> -->
          </div>
          <div class="flow-setting-item">
            <p class="flow-setting-item-title">WebHook配置</p>
            <!-- <a-textarea v-model="noticeContext" :size="size" class="w-full" placeholder="通知内容" /> -->
          </div>
        </a-form>
      </div>
    </div>
    <FlowDrawerFooter @close="onClose" />
  </a-drawer>
</template>
<script lang="ts" setup name="FlowEventSetting">
  import EditName from '../../common/EditName.vue';
  import FlowDrawerFooter from '../../common/DrawerFooter.vue';
  // 定义子组件向父组件传值/事件
  const emit = defineEmits(['close']);
  const state=reactive({
    node: {},
    visible: false,
    headerStyle: {
      'background-color': '#ff4056',
      'border-radius': '0px 0px 0 0',
    },
    bodyStyle: {
      height: 'calc(100vh - 114px)',
      'overflow-y': 'auto',
    },
    noticeContext: '',
    noticeType: [],
  });
  function afterVisibleChange(val) {
        console.log('visible', val);
      }
  function showDrawer(node) {
    state.visible = true;
    state.node = node;
  }
  function onClose() {
    state.visible = false;
    emit('close');
  }
 defineExpose({ showDrawer });
</script>
